import React from 'react'
import Head from 'next/head'
import '../static/style/pages/detail.css'
import { Row, Col, Icon, Breadcrumb, Affix } from 'antd'
import Header from '../components/Header'
import Author from '../components/Author.js'
import Advert from '../components/advert'
import Footer from '../components/Footer'
import ReactMarkdow from 'react-markdown'
// 锚链接
import MarkNav from 'markdown-navbar'
import 'markdown-navbar/dist/navbar.css';
// ReactMarkdow替代方法
import marked from 'marked'//解析markdown
import hljs from "highlight.js";//高亮样式
import 'highlight.js/styles/monokai-sublime.css';
import Tocify from '../components/tocify.tsx'
import  servicePath  from '../config/apiUrl'
import axios from 'axios'
const Detailed = (props) => {
    let markdown = '# P01:课程介绍和环境搭建\n' +
        '[ **M** ] arkdown + E [ **ditor** ] = **Mditor**  \n' +
        '> Mditor 是一个简洁、易于集成、方便扩展、期望舒服的编写 markdown 的编辑器，仅此而已... \n\n' +
        '**这是加粗的文字**\n\n' +
        '*这是倾斜的文字*`\n\n' +
        '***这是斜体加粗的文字***\n\n' +
        '~~这是加删除线的文字~~ \n\n' +
        '\`console.log(111)\` \n\n' +
        '# p02:来个Hello World 初始Vue3.0\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n' +
        '***\n\n\n' +
        '# p03:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n' +
        '# p04:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n' +
        '#5 p05:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n' +
        '# p06:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n' +
        '# p07:Vue3.0基础知识讲解\n' +
        '> aaaaaaaaa\n' +
        '>> bbbbbbbbb\n' +
        '>>> cccccccccc\n\n' +
        '``` var a=11; ```'
    const tocify = new Tocify()
    const renderer = new marked.Renderer()

    console.log(tocify, renderer.heading)
    renderer.heading = function (text, level, raw) {
        const anchor = tocify.add(text, level);
        console.log(111111111111111,text)
        return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
    };
    marked.setOptions({
        renderer: renderer,
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }
    });
    //   let html = marked(markdown)//已经转化HTML在放到页面输出
    let html = marked(props.article_content)

    return (
        <>
            <Head>
                <title>博客详细页</title>
            </Head>
            <Header />
            <Row className="comm-main" type="flex" justify="center">
                <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
                    <div>
                        <div className="bread-div">
                            <Breadcrumb>
                                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                                <Breadcrumb.Item>视频列表</Breadcrumb.Item>
                                <Breadcrumb.Item>xxxx</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        <div className="detailed-title">
                            React实战视频教程-技术胖Blog开发(更新08集)
                        </div>

                        <div className="list-icon center">
                            <span><Icon type="calendar" /> 2019-06-28</span>
                            <span><Icon type="folder" /> 视频教程</span>
                            <span><Icon type="fire" /> 5498人</span>
                        </div>

                        <div className="detailed-content" dangerouslySetInnerHTML={{ __html: html }}>
                            {/* <ReactMarkdow
                                source={markdown}
                                escapeHtml={false}
                            /> */}
                            {/* 应该识别标签react有自带属性 */}
                            {/* {html} */}
                        </div>
                    </div>
                </Col>

                <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
                    <Author />
                    <Advert />
                    <Affix offsetTop={5}>
                        <div className="detailed-nav comm-box">
                            <div className="nav-title">文章目录</div>
                            {/* <MarkNav
                            className="article-menu"
                            source={html}
                            ordered={false}
                        /> */}
                            <div className="toc-list">
                                {tocify && tocify.render()}
                            </div>
                        </div>
                    </Affix>

                </Col>
            </Row>
            <Footer />
        </>
    )
}

Detailed.getInitialProps = async (context) => {
    // 接受上下文 得到id
    console.log(context.query.id)
    var id = context.query.id
    // 应该返回一个对象
    // 遇到跨域问题。服务端解决
    const promise = new Promise((resolve) => {
        axios(servicePath.getArticleById + id).then(res => {
            console.log(res)
            resolve(res.data.data[0])
        })
    })
    return await promise

}
export default Detailed